<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>热点事件排行榜</title>
<style type="text/css">
	body{
		text-align: center;
	}
</style>
</head>
<body>
	<div>
		关键字：<input id="keyword"/>  <button onclick="query()">查询</button>
	</div>
	<h2>热点事件排行榜</h2>
	<table width="600" border="1" align="center">
		<thead>
			<tr>
				<th>关键词</th>
				<th>搜索指数</th>
				<th>创建时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div>
		<a href="javascript:void(0)" onclick="getFirstPage()">首页</a>
		<a href="javascript:void(0)" onclick="getPrePage()">上一页</a>
		<a href="javascript:void(0)" onclick="getNextPage()">下一页</a>
		<a href="javascript:void(0)" onclick="getLastPage()">尾页</a>
		第<span id="pageIndex">x</span>页/
		共<span id="totalPage">y</span>页
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
var pageIndex = 1; //当前页数
var pages = 0;
var keyword = '';

function query(){
	pageIndex = 1
	keyword = $("#keyword").val()
	getPage();
}
	function getPage(){
		$.getJSON("hotevents/page",{"pageIndex":pageIndex,"keyword":keyword},function(res){
			if(res.resultCode == 200){
				let events = res.data.records;
				pages = res.data.pages
				//console.log(events)
				$("tbody").empty()
				for(let i in events){
					let event = events[i]
					$("tbody").append(`
							<tr>
								<td><a href="comments.html?hid=${event.id}">${event.keyWord}</a></td>
								<td>${event.searchSum}</td>
								<td>${event.createDate}</td>
							</tr>`)
				}
				$("#pageIndex").text(pageIndex)
				$("#totalPage").text(pages)
			}
		})
	}
	
function getFirstPage(){
	pageIndex = 1;
	getPage();
}
	
function getLastPage(){
	pageIndex = pages
	getPage();
}

function getPrePage(){
	if(pageIndex == 1){
		return;
	}
	pageIndex--
	getPage();
}

function getNextPage(){
	if(pageIndex == pages){
		return;
	}
	pageIndex++
	getPage();
}

$(function(){
	getPage();
})
</script>
</html>